<template>
  <el-card style="margin-bottom: 20px">
    <div slot="header" class="clearfix">
      <span>{{ $t("userCard.aboutMe") }}</span>
    </div>

    <div class="user-profile">
      <div class="box-center" v-if='user.extraProperties.Avatar'>
        
        <el-avatar :size="80"     :src="convertBase64" fit="fill"></el-avatar>
      </div>
      <div />
      <div class="box-center">
        <div class="user-name text-center">{{ user.name }}</div>
        <div class="user-role text-center text-muted">
          {{ uppercaserole }}
        </div>
      </div>
      <div class="box-center">
        <el-upload
          name="file"
          :before-upload="beforeUpload"
          :http-request="uploadAvatar"
          :show-file-list="false"
        >
          <el-button type="primary" icon="el-icon-upload">{{
            $t("userCard.changeAvatar")
          }}</el-button>
        </el-upload>
      </div>
    </div>
    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
          <span>{{ $t("userCard.personalIntroduction") }}</span>
        </div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            {{
              user.extraProperties
                ? user.extraProperties.Introduction
                : $t("userCard.personalIntroductionContent")
            }}
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
// import PanThumb from "@/components/PanThumb";
import { uppercaseFirst } from "@/utils/filter";
import { useUserStore } from "@/store/modules/user";
const props = defineProps({
  user: {
    type: Object,
    default: () => {
      return {
        name: "",
        userName: "",
        email: "",
        avatar: "",
        role: "",
        phoneNumber: "",
        introduction: "",
        extraProperties:{
          Avatar:null,
          Introduction:''
        }
      };
    },
  },
});

const loading = ref(false);

function beforeUpload(file: any) {
  // TODO: Image format verification
}

function getBase64(file: any) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader();
    let imgResult: string | ArrayBuffer | null = "";
    reader.readAsDataURL(file);
    reader.onload = function () {
      imgResult = reader.result;
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.onloadend = function () {
      resolve(imgResult);
    };
  });
}

const userStore = useUserStore();
async function uploadAvatar(data: any): Promise<any> {
  const fd = new FormData();
  fd.append("file", data.file);
  getBase64(data.file).then((res) => {
    props.user.avatar = res;
    const userInfo = {
      userName: props.user.userName,
      email: props.user.email,
      name: props.user.name,
      phoneNumber: props.user.phoneNumber,
      extraProperties: {
        Avatar: res,
        Introduction: props.user.extraProperties.Introduction,
      },

    };
    userStore.avatar=res as string;
    loading.value = true;
  });
}

// const role= ref(props.user.role)

// console.log(role);
const uppercaserole = computed(() => {
  if (props.user.role != undefined) {
    return uppercaseFirst(props.user.role);
  }
});

const convertBase64=computed(()=>{
  return  (props.user.extraProperties.Avatar  as String);  
})
</script>
<style scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-name {
  font-weight: bold;
  text-align: center;
}
.box-center {
  padding-top: 10px;
}
.user-role {
  padding-top: 10px;
  font-weight: 400;
  font-size: 14px;
}
.box-socia {
  padding-top: 30px;
}
.el-table {
  border-top: 1px solid #dfe6ec;
}
.user-follow {
  padding-top: 20px;
}

span {
  padding-left: 4px;
}
.user-bio-section {
  font-size: 14px;
  padding: 15px 0;
}
.user-bio-section-header {
  border-bottom: 1px solid #dfe6ec;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.user-bio {
  margin-top: 20px;
  color: #606266;
}
</style>
